<template>
  <div class="nav-header">
    <div class="header">
      <div class="fold" @click="handleFold">
        <el-icon><Operation /></el-icon>
      </div>
      <div class="info">user</div>
    </div>
    <el-tag
      v-for="(tag, index) in tagList"
      :key="index"
      class="tag"
      :closable="tag.url !== 'main'"
      @close="handleColse(tag,index)"
      @click="changeMenu(tag)"
      :effect="route.path === tag.url ? 'dark' : 'plain'"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>
<script setup>
import { computed } from '@vue/runtime-core'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import tagsStore from '../../store/modules/tags.js'
import { ref } from 'vue'

const route = useRoute()
const router = useRouter()
const store = tagsStore()
const tagList = computed(() => store.tagList)

const changeMenu = (tag) => {
  store.selectMenu(tag)
  router.push({path:tag.url})
}

const handleColse = (tag,index)=> {
  let length = tagList.value.length - 1
  store.closeTags(tag)
  if (tag.url !== route.path) {
    return
  }
  if (index == length) {
    router.push({path:tagList.value[index - 1].url})
  }else {
    router.push({path:tagList.value[index].url})
  }

}

</script>
<style lang="less" scoped>
.nav-header {
  width: 100%;
}
.nav-header .header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fold {
  margin-left: 10px;
}
.tag {
  margin-right: 10px;
}
</style>
